<template>
  <div>
    <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
    <a-tree
      @expand="onExpand"
      :expandedKeys="expandedKeys"
      :autoExpandParent="autoExpandParent"
      :showLine="true"
      :treeData="tree_data"
    >
      <template slot="title" slot-scope="{title, balance}">
        <span v-if="title.indexOf(searchValue) > -1">
          {{title.substr(0, title.indexOf(searchValue))}}
          <span style="color: #f50">{{searchValue}}</span>
          {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
          <span style="color: green">{{balance}}</span>{{ $t('memberSub.y') }}
        </span>
        <span v-else>{{title}} <span style="color: green">{{balance}}</span>{{ $t('memberSub.y') }}</span>
      </template>
    </a-tree>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tree } from 'ant-design-vue'

Vue.use(Tree)
// const x = 3
// const y = 2
// const z = 1
const gData = []
//
// const generateData = (_level, _preKey, _tns) => {
//   const preKey = _preKey || '0'
//   const tns = _tns || gData
//
//   const children = []
//   for (let i = 0; i < x; i++) {
//     const key = `${preKey}-${i}`
//     tns.push({ title: key, key, scopedSlots: { title: 'title' } })
//     if (i < y) {
//       children.push(key)
//     }
//   }
//   if (_level < 0) {
//     return tns
//   }
//   const level = _level - 1
//   children.forEach((key, index) => {
//     tns[index].children = []
//     return generateData(level, key, tns[index].children)
//   })
// }
// generateData(z)
//
const dataList = []
const generateList = data => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i]
    const key = node.key
    dataList.push({ key, title: node.title, balance: node.balance })
    if (node.children) {
      generateList(node.children)
    }
  }
}

console.log(gData)
//

const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}
export default {
  props: [
    'tree_data'
  ],
  data () {
    return {
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
    }
  },
  methods: {
    getSubTree (id) {
      this.$http.get('/member/get_sub_tree?id=' + id).then(res => {
        this.treeList = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('memberSub.sb'),
          description: err.message
        })
      })
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onChange( e ) {
      const value = e.target.value
      const expandedKeys = dataList
        .map(item => {
          if (item.title.indexOf(value) > -1) {
            return getParentKey(item.key, this.tree_data)
          }
          return null
        })
        .filter((item, i, self) => item && self.indexOf(item) === i)
      console.log('xxx', expandedKeys)

      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true
      })
    }
  },
  watch: {
    tree_data (val) {
      generateList(val)
    }
  }
}
</script>
<style>
  .ant-tree li ul{
    padding-left:50px;
  }
</style>
